<script lang="ts" setup>
import { ref } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
import UnoExample from '@/components/UnoExample.vue'

const showExample = ref(false)
</script>

<template>
  <div class="min-w-[400px] max-h-[600px] overflow-y-auto p-4">
    <div class="flex justify-center items-center gap-4 mb-4">
      <a href="https://wxt.dev" target="_blank" class="inline-block">
        <img 
          src="/wxt.svg" 
          class="h-20 p-4 transition-all duration-300 hover:drop-shadow-[0_0_2em_#54bc4ae0]" 
          alt="WXT logo" 
        />
      </a>
      <a href="https://vuejs.org/" target="_blank" class="inline-block">
        <img 
          src="@/assets/vue.svg" 
          class="h-20 p-4 transition-all duration-300 hover:drop-shadow-[0_0_2em_#42b883aa]" 
          alt="Vue logo" 
        />
      </a>
    </div>
    
    <div class="mb-4">
      <button 
        @click="showExample = !showExample"
        class="w-full px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-semibold rounded-lg transition-all duration-300 shadow-md hover:shadow-lg transform hover:scale-[1.02] active:scale-95"
      >
        {{ showExample ? '显示基础示例' : '显示 UnoCSS 示例' }}
      </button>
    </div>

    <HelloWorld v-if="!showExample" msg="WXT + Vue + UnoCSS" />
    <UnoExample v-else />
  </div>
</template>
